{% extends "base.html" %}
{% block title %}创建题目 - 管理员控制台{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
  <!-- 顶部导航 -->
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <a href="{{ url_for('admin_manage_problems') }}" class="text-gray-600 hover:text-gray-900">
            <i class="fas fa-arrow-left mr-2"></i>返回题目列表
          </a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <!-- 标题区 -->
      <div class="px-6 py-5 border-b border-gray-200">
        <h1 class="text-2xl font-bold text-gray-900">创建新题目</h1>
        <p class="mt-1 text-sm text-gray-500">请填写题目信息，带 <span class="text-red-500">*</span> 为必填项</p>
      </div>

      <!-- 表单区 -->
      <form method="post" class="p-6 space-y-8">
        {{ form.csrf_token }}
        
        <!-- CSRF错误提示 -->
        {% if form.csrf_token.errors %}
          <div class="p-4 mb-4 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
            <i class="fas fa-exclamation-circle mr-2"></i>CSRF验证失败，请刷新页面重试
          </div>
        {% endif %}

        <!-- 基础信息分组 -->
        <div>
          <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
            <i class="fas fa-info-circle mr-2 text-indigo-500"></i>基础信息
          </h2>
          
          <!-- 题目名称 -->
          <div class="mb-6">
            <label for="{{ form.title.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              题目名称 <span class="text-red-500">*</span>
            </label>
            {{ form.title(
              id=form.title.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              placeholder="例如：两数之和"
            ) }}
            {% if form.title.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.title.errors[0] }}
              </div>
            {% endif %}
          </div>

          <!-- 题目描述（核心修改：添加样式支持可视化换行） -->
          <div class="mb-6">
            <label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              题目描述 <span class="text-red-500">*</span>
            </label>
            {{ form.description(
              id=form.description.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 whitespace-pre-wrap",
              rows=6,
              placeholder="描述题目要求、输入输出格式、示例说明等（支持换行，按Enter键即可）"
            ) }}
            {% if form.description.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.description.errors[0] }}
              </div>
            {% endif %}
            <p class="mt-1 text-xs text-gray-500 flex items-center">
              <i class="fas fa-info-circle mr-1"></i>
              支持换行输入（按Enter键），提交后将保留换行格式
            </p>
          </div>

          <!-- 英文标识 -->
          <div class="mb-6">
            <label for="{{ form.template_file.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              英文标识 <span class="text-red-500">*</span>
            </label>
            {{ form.template_file(
              id=form.template_file.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              placeholder="例如：two_sum.cpp"
            ) }}
            {% if form.template_file.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.template_file.errors[0] }}
              </div>
            {% endif %}
            <p class="mt-1 text-xs text-gray-500 flex items-center">
              <i class="fas fa-info-circle mr-1"></i>
              仅支持英文、数字、下划线和点（.），用于模板文件命名
            </p>
          </div>

          <!-- 测试用例目录 -->
          <div class="mb-6">
            <label for="{{ form.testcases_dir.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              测试用例目录 <span class="text-red-500">*</span>
            </label>
            {{ form.testcases_dir(
              id=form.testcases_dir.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              placeholder="例如：testcases/two_sum"
            ) }}
            {% if form.testcases_dir.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.testcases_dir.errors[0] }}
              </div>
            {% endif %}
            <p class="mt-1 text-xs text-gray-500 flex items-center">
              <i class="fas fa-info-circle mr-1"></i>
              用于存储该题目的.in和.out测试用例文件
            </p>
          </div>
        </div>

        <!-- 代码配置分组 -->
        <div>
          <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
            <i class="fas fa-code mr-2 text-indigo-500"></i>代码配置
          </h2>
          
          <!-- 难度 -->
          <div class="mb-6">
            <label for="{{ form.difficulty.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              难度 <span class="text-red-500">*</span>
            </label>
            {{ form.difficulty(
              id=form.difficulty.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              placeholder="简单/中等/困难"
            ) }}
            {% if form.difficulty.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.difficulty.errors[0] }}
              </div>
            {% endif %}
          </div>

          <!-- 输出类型 -->
          <div class="mb-6">
            <label for="{{ form.output_type.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              输出类型 <span class="text-red-500">*</span>
            </label>
            {{ form.output_type(
              id=form.output_type.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              placeholder="ordered"
            ) }}
            {% if form.output_type.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.output_type.errors[0] }}
              </div>
            {% endif %}
            <p class="mt-1 text-xs text-gray-500 flex items-center">
              <i class="fas fa-info-circle mr-1"></i>
              可选值：ordered（有序）/ unordered（无序）/ exact（精确匹配）
            </p>
          </div>

          <!-- 初始代码（JSON） -->
          <div class="mb-6">
            <label for="{{ form.initial_codes.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              初始代码（JSON） <span class="text-red-500">*</span>
            </label>
            {{ form.initial_codes(
              id=form.initial_codes.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm font-mono text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              rows=6,
              value='{\n  "cpp": "#include <vector>\\nusing namespace std;\\n\\nint solution(vector<int>& nums, int target) {\\n    return 0;\\n}"\n}'
            ) }}
            {% if form.initial_codes.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.initial_codes.errors[0] }}
              </div>
            {% endif %}
          </div>

          <!-- 函数签名（JSON） -->
          <div class="mb-6">
            <label for="{{ form.function_signature.id }}" class="block text-sm font-medium text-gray-700 mb-1">
              函数签名（JSON） <span class="text-red-500">*</span>
            </label>
            {{ form.function_signature(
              id=form.function_signature.id,
              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm font-mono text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500",
              rows=4,
              value='{\n  "name": "solution",\n  "return_type": "int",\n  "parameters": [{"type": "vector<int>&", "name": "nums"}, {"type": "int", "name": "target"}]\n}'
            ) }}
            {% if form.function_signature.errors %}
              <div class="mt-1 flex items-center text-red-600 text-sm">
                <i class="fas fa-exclamation-triangle mr-1"></i>
                {{ form.function_signature.errors[0] }}
              </div>
            {% endif %}
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
          <button 
            type="button" 
            class="px-6 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
            onclick="history.back()"
          >
            <i class="fas fa-times mr-2"></i>取消
          </button>
          <button 
            type="submit" 
            class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
          >
            <i class="fas fa-check mr-2"></i>确认创建
          </button>
        </div>
      </form>
    </div>
  </main>
</div>
{% endblock %}

{% block extra_css %}

<style>
  .modal-backdrop {
    z-index: 1040 !important; /* 确保低于模态框 */
  }
  .modal {
    z-index: 1050 !important; /* 确保模态框在最上层 */
  }
  /* 确保textarea中的换行能被可视化 */
  textarea.whitespace-pre-wrap {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
</style>

<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
{% endblock %}
    